<!DOCTYPE html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Performance tweaks</title>
	<script src="../../codebase/dhtmlxgantt.js?v=7.0.7"></script>
	<link rel="stylesheet" href="../../codebase/dhtmlxgantt.css?v=7.0.7">
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link rel="stylesheet" href="../common/controls_styles.css?v=7.0.7">

	<script src="../common/testdata.js?v=7.0.7"></script>
	<style>
		html, body {
			height: 100%;
			padding: 0px;
			margin: 0px;
			overflow: hidden;
		}

		.controls {
			font-family: "Arial";
			width: 670px;
			margin: 0 auto;
		}

		.controls td {
			text-align: right;
			line-height: 20px;
			color: #535353;
			font-size: 14px;
		}

		.controls th {
			font-size: 14px;
		}

		.controls input {
			max-width: 30px;
			padding: 2px 7px;
			text-align: right;
			border: 1px solid #d6d6d6;
		}

		.controls table {
			border-collapse: collapse;
		}

		.controls td, .controls th {
			border: 1px solid #d6d6d6;
			padding: 0 10px;
		}

		.dhtmlx-intro div {
			background-color: #FEFFEA;
			border: 1px solid #A2A0A0;
		}

		.gantt_control button{
			margin: 0 5px!important;
			padding: 3px 10px!important;
		}
	</style>
</head>
<body>

<div class="gantt_control" style="padding-top: 0">
	<div class="controls" id="controls_wrapper">
	<table>
		<tr>
			<th>Background Mode</th>
			<th>Task element</th>
			<th>Scales</th>
			<th>Data</th>
		</tr>
		<tr>
			<td><label>Default <input type="radio" id="default" name="mode"><i class="material-icons">radio_button_unchecked</i></label></td>
			<td><label class="checked_label">Show progress <input type="checkbox" id="progress" checked><i class="material-icons icon_color">check_box</i></label></td>
			<td><label style="color: rgba(0,0,0,0.38)">Year scale <input type="checkbox" id="year" checked disabled="disabled"><i class="material-icons md-inactive icon_color">check_box</i></label></td>
			<td><label>Tasks <input id="tasks" value="100"></label></td>
		</tr>
		<tr>
			<td><label>Simplified <input type="radio" id="no_cells" name="mode"><i class="material-icons">radio_button_unchecked</i></label></td>
			<td><label class="checked_label">Allow resize <input type="checkbox" id="resize" checked><i class="material-icons icon_color">check_box</i></label></td>
			<td><label class="checked_label">Month scale <input type="checkbox" id="month" checked><i class="material-icons icon_color">check_box</i></label></td>
			<td>
				<button id="regenerate" onclick="resetData()">Regenerate test data</button>
			</td>
		</tr>
		<tr>
			<td><label class="checked_label">Dynamic image <input type="radio" id="canvas" name="mode" checked><i class="material-icons icon_color">radio_button_checked</i></label></td>
			<td><label class="checked_label">Show links <input type="checkbox" id="links" checked><i class="material-icons icon_color">check_box</i></label></td>
			<td><label>Week scale <input type="checkbox" id="week"><i class="material-icons">check_box_outline_blank</i></label></td>
			<td></td>
		</tr>
		<tr>
			<td><label class="checked_label">Smart rendering <input type="checkbox" id="smart_render" name="mode" checked><i class="material-icons icon_color">check_box</i></label></td>
			<td></td>
			<td><label class="checked_label">Day scale <input type="checkbox" id="day" checked><i class="material-icons icon_color">check_box</i></label></td>
			<td><label>Years <input id="from" value="2018">&ndash;<input id="to" value="2019"></label></td>
		</tr>
		<tr>
			<td colspan="4" style="text-align: center;">
				<button id="refresh" onclick="noteTime(gantt.render)">Refresh</button>
			</td>
		</tr>
	</table>
</div>
<div id="gantt_here" style='width:100%; height:calc(100vh - 171px);'></div>
<script>
	var text = ["Gantt chart with the data generated for client-side performance testing.",
		"Change settings and <b>press 'Refresh'</b> to see how it works on different configurations and amounts of data.",
		"See browser console for test logs."];
	for (var i = 0; i < text.length; i++) {
		gantt.message({
			text: text[i],
			expire: 30 * 1000,
			type: "intro"
		});
	}


	function byId(id) {
		return document.getElementById(id);
	}

	function updateMode() {
		gantt.config.static_background = false;
		gantt.config.show_task_cells = true;


		gantt.config.show_progress = byId("progress").checked;
		gantt.config.drag_resize = byId("resize").checked;
		gantt.config.show_links = byId("links").checked;
		gantt.config.smart_rendering = byId("smart_render").checked;


		gantt.config.scales = [
			{ unit: "year", step: 1, format: "%Y"}
		];

		if (byId("week").checked) {
			var dateToStr = gantt.date.date_to_str("%d %M");
			gantt.config.scales.push({unit: "week", step: 1, format: function (date) {
				var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
				return dateToStr(date) + " - " + dateToStr(endDate);
			}});
		}
		if (byId("day").checked) {
			gantt.config.scales.push({unit: "day", step: 1, format: "%d %M"});
		}
		if (byId("month").checked) {
			gantt.config.scales.push({unit: "month", step: 1, format: "%F, %Y"});
		}

		gantt.config.scale_height = 22 * gantt.config.scales.length;

		setDateRange(byId("from").value, byId("to").value);

		if (byId("canvas").checked) {
			gantt.config.static_background = true;
		} else if (byId("no_cells").checked) {
			gantt.config.show_task_cells = false;
		}
	}

	function featureState(state) {
		return (state ? "Display" : "Hide");
	}

	function printStat(time) {
		var mode = "";
		var report = [];

		if (gantt.config.static_background) {
			mode = "Canvas background rendering";
		} else if (!gantt.config.show_task_cells) {
			mode = "Simplified background rendering";
		} else {
			mode = "Default rendering";
		}
		report.push("Rendered in <b>" + (time) + "</b> seconds");
		report.push(mode);
		report.push(featureState(gantt.config.show_progress) + " progress");
		report.push(featureState(gantt.config.drag_resize) + " drag handles");
		report.push(featureState(gantt.config.show_links) + " link handles");

		var scales = [];
		for (var i = 0; i < gantt.config.subscales.length; i++) {
			scales.push(gantt.config.subscales[i].unit);
		}


		report.push("Scales : <b>" + scales.join(", ") + "</b> ");
		var scale = gantt.getScale();
		report.push(gantt.getTaskCount() + " tasks, " +
			(scale.count) + " columns in a time scale");
		gantt.message({text: report.join("<br>"), expire: 10000});
		console.log("================");
		console.log(report.join("\n"));


	}

	function noteTime(method) {
		if (gantt.getTaskByTime().length != parseInt(byId("tasks").value, 10)) {
			resetData();
		}

		gantt.message("Rendering...");
		updateMode();
		var start = Date.now();

		method.call(gantt);
		var end = Date.now();
		printStat((end - start) / 1000);
		var selectedId = gantt.getSelectedId();
		if (selectedId)
			gantt.showTask(selectedId);
	}

	function resetData() {
		var start = Date.now();
		gantt.message("Generating random data");
		var count = byId("tasks").value,
			from = byId("from").value,
			to = byId("to").value;
		var data = generateData(count, from, to);
		gantt.clearAll();
		gantt.parse(data);
		var end = Date.now();
		gantt.message("Generated and parsed <b>" + gantt.getTaskByTime().length + "</b> tasks in <b>" + (end - start) / 1000 + "</b> seconds");
	}

	function randomDate(start, end) {
		return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
	}

	function setDateRange(from, to) {
		from = parseInt(from, 10) || 2018;
		to = parseInt(to, 10) || (from + 1);

		if (to < from) {
			to = from + 1;
		}

		gantt.config.start_date = new Date(from, 0, 1);
		gantt.config.end_date = new Date(to, 0, 1);
	}

	function generateData(count, from, to) {
		var tasks = {
			data: [],
			links: []
		};
		setDateRange(from, to);


		count = parseInt(count, 10) || 100;

		var date = new Date(gantt.config.start_date.getFullYear(), 5, 1);
		var project_id = 1;
		tasks.data.push({
			id: project_id,
			text: "Project1",
			type: gantt.config.types.project,
			open: true
		});
		for (var i = 1; i < count; i++) {
			date = gantt.date.add(date, 1, "day");
			var task = {
				id: i + 1,
				start_date: date,
				text: "Task " + (i + 1),
				duration: 8,
				parent: project_id
			};

			if (gantt.date.add(date, 8, "day").valueOf() > gantt.config.end_date.valueOf()) {
				date = new Date(gantt.config.start_date);
				project_id = i + 1;
				delete task.parent;
				task.open = true;
			}
			tasks.data.push(task);

		}
		return tasks;
	}


	gantt.config.start_date = new Date(2018, 0, 1);
	gantt.config.end_date = new Date(2019, 0, 1);

	gantt.config.min_column_width = 50;

	gantt.config.static_background = true; // is important only during initialization
	gantt.init("gantt_here");
	updateMode();
	resetData();

	var control_inputs = document.getElementById("controls_wrapper").getElementsByTagName("input");
	for (var i = 0; i < control_inputs.length; i++) {
		var control_input = control_inputs[i];
		if (control_input.type == "checkbox")
			control_input.onchange = function() {
				updCheckboxLabel(this);
			}

		if (control_input.type == "radio")
			control_input.onclick = function() {
				updRadio(this);
			}
	}

	function updCheckboxLabel(el){
		el.parentElement.classList.toggle("checked_label");

		var iconEl = el.parentElement.querySelector("i"),
			checked = "check_box",
			unchecked = "check_box_outline_blank",
			className = "icon_color";

		iconEl.textContent = iconEl.textContent==checked?unchecked:checked;
		iconEl.classList.toggle(className);
	}

	function updRadio(el){
		var els = document.querySelectorAll("input[type=radio]"),
			checked = "radio_button_checked",
			unchecked = "radio_button_unchecked";

		for (var i = 0; i < els.length; i++) {
			var parentEl = els[i].parentElement;

			parentEl.querySelector("i").textContent = els[i]==el?checked:unchecked;

			if(els[i]==el) {
				parentEl.classList.add("checked_label");
				parentEl.querySelector("i").classList.add("icon_color");
			} else {
				parentEl.classList.remove("checked_label")
				parentEl.querySelector("i").classList.remove("icon_color");
			}
		}
	}

</script>
</body>